<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 100vw;
        height: 100vh;

    }

    #one {
        background-color: pink;
        text-align: center;
    }

    #two {
        background-color: rgb(196, 84, 171);
        text-align: center;
    }

    #three {
        background-color: rgb(67, 216, 216);
        text-align: center;
    }

    #four {
        background-color: rgb(105, 199, 136);
        text-align: center;
    }

    #five {
        background-color: rgb(216, 67, 62);
        text-align: center;
    }

    .btn {
        display: flex;
        text-align: center;
        position: fixed;
        z-index: 10;
        margin-left: 10px;
        margin: auto;
    }

    .header {
        height: 40px;
        width: 100vw;
        background-color: rgb(123, 190, 207);
        position: fixed;
        z-index: 10;
    }

    .herder-top-collapse {
        height: 50px;
        background-color: rgb(107, 34, 136);
    }
</style>

<body>

    <div class="box" id="one">
        <div class="header">
            <div class="btn">
                <button onClick="scrollInto('#one')" class="header-top">one</button>
                <button onClick="scrollInto('#two')" class="header-top" >two</button>
                <button onClick="scrollInto('#three')" class="header-top">three</button>
                <button onClick="scrollInto('#four')" class="header-top">four</button>
                <button onClick="scrollInto('#five')" class="header-top">five</button>
            </div>
        </div>
        <div>one</div>
    </div>
    <div class="box" id="two">two</div>
    <div class="box" id="three">three</div>
    <div class="box" id="four">four</div>
    <div class="box" id="five">five</div>
    <script src="./jquery3.5.min.js"></script>
    <script src="./跳转.js"></script>

</body>

</html>